<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片插入</title>
</head>
<body>
    <!-- src用来保存图片的路径 alt用来保存图片加载失败的替换文字信息-->
    <!-- 相对路径：从当前html文件出发去找图片资源,注意要写完整的图片名! name.suffix
    1) 图片与html文件在同一级目录,直接写图片全名 2.png
    2) 图片在html文件的下一级目录,先写文件夹名,再写文件夹下的图片全名 img/3.jpg
    3) 图片在html文件的上一级目录,先../回到上一级目录,再写图片全名 ../1.png
    -->
    <img src="4.png" alt="" width="300px" title="美女">
    <img src="img/3.png" alt="" width="300px" title="美女">
    <img src="../2.png" alt="" width="300px" title="美女">
    <!-- 绝对路径：从盘符或协议开始 -->
    <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/live/0b5416b9dd041382c24c5842fe00fea4_preview_mid.jpg" width="300px" title="美女">
    <!-- width设置图片宽度 height设置图片高度 title设置图片悬停时显示的文字
       图片失真:图片的宽高比例不对,压缩或拉伸了
       图片本身是有大小有宽高比的,可以设置宽高其中的一个属性,另一个会根据图片宽高比而改变 -->
    <img src="img/fcq.jpg" width="300px" height="480px" title="这是泡泡老师嘴里的帅哥">
    <img src="1.png" alt="哎呀，美女被坏人拖走了">
</body>
</html>